// JavaScript Document

	File.loaded = function(){
		var o = (this.id == O_ID);
		if(o) $('icontop').style.backgroundImage = 'url(' + ICON + '/' + this.checksum + '-128.' + this.xtn + ')'
		this.rdk_flag = (o &&(this.rdk != 'docs'));
		$('bigwait').hide();
		if(!View.cur) View.switchTo(this.rdk_flag ? 1 : 0);
		body.setReadOnly(Boolean(this.template));
	}
	
	File.rdk_alert = "Since this image is not in the docroot you'll have to open a draft to view/edit it<br /> <em>(drafts are copied to a public temp directory - the uri of the original file is this page).";

	File.gathered = function(){
		switch(imgstate.action){
			case 'Resize':
				this.args.set.x = imgstate.tool_w;
				this.args.set.y = imgstate.tool_h;
				break;
			case 'Crop':
				var ox = File.x - (imgstate.tool_x + imgstate.tool_w);
				var oy = File.y - (imgstate.tool_y + imgstate.tool_h);
				this.args.set.crop = [imgstate.tool_y, ox, oy, imgstate.tool_x];
				break;
			case 'Rotate':
				this.args.set.rotate= getRadioValue('rotate');
				break;
			case 'Flip':
				if($('flip_vertical').checked) this.args.set.flip_vertical = 1;
				if($('flip_horizontal').checked) this.args.set.flip_horizontal = 1;
				break;
			case 'Color':
				this.args.set.grayscale = ($('grayscale').checked) ? 1 : '';
				this.args.set.negative = ($('negative').checked) ? 1 : '';
				this.args.set.brightness = $('Brightness').value;
				this.args.set.contrast = $('Contrast').value;
		}
		disable_buttons();
	}
	
	function disable_buttons(){
		'Crop,Resize,Rotate,Flip,Color'.split(',').each(function(n){ $('apply_'+n).disabled = true });	
	}
	
	View.views[0] = 'view_cont,view_tools';
	View.views[1] = 'view_meta,view_save';
	View.views[2] = 'view_arb,view_save';
	View.switched = function(a){
		if(File.rdk_flag && !a){
			TUXalert(File.rdk_alert);
			return this.switchTo(1);
		}
		// We suspend autosave if we're viewing the image
		$('as_chk').disabled = !a;
		// And reset the tools so autosave doesn't edit the image
		resetTools()
	}

	
	var imgstate = {
		visibleTool : '',
		action : '',
		tool_w : File.x,
		tool_h: File.y,
		tool_x : 0,
		tool_y : 0,
		// resize holds the resize object so we only instantiate it once
		resize : false
	}
	
	function resetTools(){
		imgstate.tool_x = 0;
		imgstate.tool_y = 0;
		imgstate.tool_w = File.x;
		imgstate.tool_h = File.y;
		disable_buttons();
		initTool('');
	}
	
	var IH = {
		eimgs:{},
		eimg:function(){
			if(!this.eimgs[File.updated]) this.eimgs[File.updated] = new eimg();
			return this.eimgs[File.updated];
		},
		show:function(t){
			for(var k in this.eimgs) this.eimgs[k].hide();
			this.eimg().show(t);
		}
	}
	
	function curimage(){
		return IH.eimg().img;	
	}
	
	var eimg = function(){
		this.img = {}
		this.loaded = {}
		this.mkdiv = function(t){
			var div = document.createElement('div')
			div.style.display = 'none';
			var img  = document.createElement('img');
			img.id = t + File.updated;
			img.eimg = this;
			img.onload = function(){
				this.eimg.loaded[this.src] = true;	
				this.div.show();
				$('bigwait').hide();
			}
			img.src = File.uri + '?' + File.updated
			div.img = img;
			img.div = div;
			div.appendChild(img);
			$(t + 'Container').appendChild(div);
			return div;
		}
		this.divs = {}
		this.show = function(t){
			var tk = (t) ? t : 'main';
			this.hide();
			if(!this.divs[tk]) this.divs[tk] = this.mkdiv(t);
			this.img = this.divs[tk].img;
			if(this.loaded[this.img.src]) this.divs[tk].show();
			else if(!View.cur) $('bigwait').show();
		}
		this.hide = function(){
			for(var k in this.divs) this.divs[k].hide();
		}
	}
	
	function initTool(Tool){
		if(File.id == O_ID && File.rdk != 'docs') return;
		var oldTool = imgstate.action;
		$(oldTool + 'ToolBox').hide();
		$(Tool + 'ToolBox').show();
		imgstate.action = Tool;
		switch(Tool){
			case 'Crop':
				IH.show(Tool)
				if(curimage().cropper) curimage().cropper.remove();
				$('cropNotify').hide();
				$('apply_Crop').disabled = true;
				curimage().cropper =  new Cropper.Img(curimage().id, {onEndCrop:function(coords,dimensions){
					imgstate.tool_x = coords.x1;
					imgstate.tool_y = coords.y1;
					imgstate.tool_w = dimensions.width;
					imgstate.tool_h = dimensions.height;
					$('cropX').innerHTML = dimensions.width;
					$('cropY').innerHTML = dimensions.height;
					$('cropNotify').show();	
					$('apply_Crop').disabled = false;
				}});
				break;
			case 'Resize':
				IH.show(Tool)
				if(!imgstate.resize) initSliders();
				else imgstate.resize.reset();
				break;
			case 'Color':
				IH.show('')
				if(!imgstate.colorsliders) initColorSliders();
				imgstate.colorreset();
			default:
				IH.show('')
		}
	}
	
	var onEndCrop = function(coords,dimensions) {
		imgstate.tool_x = coords.x1;
		imgstate.tool_y = coords.y1;
		imgstate.tool_w = dimensions.width;
		imgstate.tool_h = dimensions.height;
		$('cropX').innerHTML = dimensions.width;
		$('cropY').innerHTML = dimensions.height;
		$('cropNotify').show();
	}
	
	function makeResizeSliders(pw, ph){
		var o = {};
		
		o.moveto = function(x,y){
			// whether to constrain
			var c = $('constrain').checked;
			// get the x value from y or last x
			if(!x) x = (c) ? (y/File.y)*File.x : imgstate.tool_w;
			// and same for y
			if(!y) y = (c) ? (x/File.x)*File.y : imgstate.tool_h;
			// tidy values
			xpc = Math.floor((x/File.x)*100);
			ypc = Math.floor((y/File.y)*100);
			x = Math.floor(x);
			y = Math.floor(y);
			// set the pic dims and store
			curimage().style.width = x + 'px';
			curimage().style.height = y + 'px';
			imgstate.tool_w = x;
			imgstate.tool_h = y;
			// set the text boxes
			$('resize_wpc').value = ($('resize_wu').value) ? x : xpc;
			$('resize_hpc').value = ($('resize_hu').value) ? y : ypc;
			// set the sliders
			o.x.setValue(xpc);
			o.y.setValue(ypc);
		}
		
		o.x = new Control.Slider('resizeHandleW','resizeTrackW', { 
			axis:'horizontal', 
			range:$R(10,200), 
			sliderValue:100,
			onSlide: function(v){ 
				vx = File.x * (v/100);
				o.moveto(vx, false)
			},
			onChange: function(v) {
				$('apply_Resize').disabled = false;
			}
		});
		
		o.y = new Control.Slider('resizeHandleH','resizeTrackH', { 
			axis:'horizontal', 
			range:$R(10,200), 
			sliderValue:100,
			onSlide: function(v){ 
				vy = File.y * (v/100);
				o.moveto(false, vy)
			},
			onChange: function(v) { 
				$('apply_Resize').disabled = false;
			}
		});
		
		o.update = function(){
			o.moveto(imgstate.tool_w, imgstate.tool_h);	
		}
		
		o.reset = function(){
			$('constrain').checked = true;
			$('resize_wu').value = $('resize_hu').value = '';
			o.moveto(File.x, File.y);
			$('apply_Resize').disabled = true;
		}
		
		return o;
	}
	
	function initSliders(){
		var sliders = makeResizeSliders();
		sliders.reset();
		
		$('resize_wpc').onchange = function(){
			var v = this.value;
			var vx = ($('resize_wu').value) ? v : File.x * (v/100);
			sliders.moveto(vx) 
		}
		
		$('resize_hpc').onchange = function(){
			var v = this.value;
			var vy = ($('resize_hu').value) ? v : File.y * (v/100);
			sliders.moveto(false, vy) 
		}
		
		$('resize_wpc').onclick = function(){
			this.select();
		}
		
		$('resize_hpc').onclick = function(){
			this.select();
		}
		
		$('resize_wu').onchange = sliders.update;
		$('resize_hu').onchange = sliders.update;
		imgstate.resize = sliders;
	}
	
	
	function makeColorSlider(T){
		return new Control.Slider(T + 'Handle', T + 'Track', { 
			axis:'horizontal', 
			range:$R(-127,127), 
			sliderValue:50,
			onSlide: function(v){ 
				$(T).value = parseInt(v)
				$('apply_Color').disabled = false;
			},
			onChange: function(v) { 
				
			}
		});	
	}
	
	function initColorSliders(){
		imgstate.colorsliders = {}
		for(var T in {Brightness:'', Contrast:''}) imgstate.colorsliders[T] = makeColorSlider(T);
		imgstate.colorreset = function(){
			for(var T in this.colorsliders){
				this.colorsliders[T].setValue(0)
				$(T).value = 0
			}
			$('negative').checked = $('grayscale').checked = false;
			$('apply_Color').disabled = true;
		}
	}
	
	function colorEval(e){
		if(e.type == "text"){
			var n = parseInt(this.value);
			if(!n || (n < -127) || (n > 127)) n = 0;
			imgstate.colorsliders[this.id].setValue(n);
			this.value = n
		}
		$('apply_Color').disabled = false;
	}
	
	function RotateEval(){
		$('apply_Rotate').disabled = !(getRadioValue('rotate'));
	}
	
	function FlipEval(){
		$('apply_Flip').disabled =  !($('flip_horizontal').checked || $('flip_vertical').checked);
	}

	
	